<template>
	<view class="per">
		<view class="information">
			<view class="image-container" style="position: relative;">
			    <image :src="userInfo.headimg || img" @click="pending()" mode="aspectFill" class="information-img"></image>
			    <view class="icon-container">
			        <u-icon 
			            :name="userInfo.base_sex == 1 ? '/static/user/male.png' : '/static/user/females.png'" 
			            size="18">
			        </u-icon>
			    </view>
			</view>
			<view class="text-content">
				<!-- #ifdef H5 -->
				<view class="text-con" style="display: flex;">
					<text class="name">{{userInfo.nickname}}</text>
					 
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view style="display: flex;align-items: center;justify-content:space-between;">
					<text class="name">{{userInfo.nickname}}</text>
				</view>
				<!-- #endif -->
			</view>
			<view class="icons">
				<view @click="pending()" class="icon-item">
					<u-icon size="18" name="/static/user/Edit.png"></u-icon>
					<text>个人信息</text>
				</view>
				<view class="icon-item"   @click="Invit()">
					<u-icon name="/static/user/Scan.png" size="18" />
					<text>邀请码分享</text>
				</view>
			</view>
		</view>
		<view class="bott">
			<view class="bott-bor" @click="myFavorites()">
				<u-icon name="/static/user/handHold.png" color="#e78c17" size="25" />
				<text>我的收藏</text>
				<u-icon name="arrow-right" color="#afafaf" size="17" />
			</view>
			<view class="bott-bor" @click="goIncome()">
				<u-icon name="/static/user/profit.png" @click="goIncome()" color="#e78c17" size="25" />
				<text>个人收益</text>
				<u-icon name="arrow-right" color="#afafaf" size="17" />
			</view>
			<view @click="goWithdraw()" class="bott-bor">
				<u-icon name="/static/user/cash.png" color="#e78c17" size="25" />
				<text>提现</text>
				<u-icon name="arrow-right" color="#afafaf" size="17" />
			</view>
			<view class="bott-bor" @click="gosetting()">
				<u-icon name="/static/user/setUp.png" color="#e78c17" size="25" />
				<text>设置</text>
				<u-icon name="arrow-right" color="#afafaf" size="17" />
			</view>
		</view>
		<view class="bott-b">
			<text @click="out()" class="logout">退出登录</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				name: '金金橙',
				gq: "金金橙",
				img: 'https://jinchengzi.cn/storage/img/20241101/759a9f79c6b543ed513f4363d7a7e1a8.jpg',
				sex: 'man',
				stateList: [],
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'webSocket'])
		},
		onShow() {
			if (this.userInfo != null && this.userInfo != 'null') {
				this.getUserInfo()
			}
		},
		methods: {
			...mapActions('user', ['getUserInfo', 'remove']),
			...mapActions(['logout']),
			...mapMutations('user', ['setWebSocket']),
			Invit(){
				uni.navigateTo({
					url: '/pages/content/Invitation/Invitation'
				})
			},
			gosetting() {
				uni.navigateTo({
					url: '/pages/content/setting/setting'
				})
			},
			gocreatorHub() {
				uni.navigateTo({
					url: "/pages/content/creatorHub/creatorHub"
				})
			},
			govisitSituation() {
				uni.navigateTo({
					url: "/pages/content/visitSituation/visitSituation"
				})
			},
			out() {
				// 确认退出操作
				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.webSocket.socketTask.close()
							// this.setWebSocket('closeWeb')
							// uni.closeSocket()
							// this.webSocket.socketTask.closeWeb()
						 // return
							this.remove()
							this.logout()
							// uni.clearStorageSync()
							// uni.clearStorageSync('vuex');// 替换为你要清除的键
							// uni.removeStorageSync('vuex'); // 替换为你要清除的键
							// 清除本地存储数据
							// 根据不同平台使用不同的方法
							// // #ifdef H5
							// localStorage.clear();
							// // #endif
							// // #ifdef MP-WEIXIN
							// wx.clearStorageSync();
							// // #endif
							// 如果有全局状态管理，比如Vuex，则更新状态
							// this.$store.commit('logout');
							// 跳转页面到登录页面
							uni.reLaunch({ // 使用reLaunch关闭所有页面，跳转到登录页
								url: '/pages/index/index'
							});
						}
					}
				});
			},
			goOrder(index) {
				console.log(index);
				uni.navigateTo({
					url: `/pages/content/order/order?stateIndex=${index}`
				})
			},
			pending() {
				uni.navigateTo({
					url: "/pages/content/pending/pending"
				})
			},
			myFavorites() {
				uni.navigateTo({
					url: '/pages/content/myFavorites/myFavorites'
				})
			},
			goIncome() {
				uni.navigateTo({
					url: '/pages/content/income/income'
				})
			},
			goWithdraw() {
				uni.navigateTo({
					url: '/pages/content/withdraw/withdraw'
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}

	.per {
		width: 90%;
		margin: auto;
	}

	.information {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 38rpx;
			border-radius: 36rpx;
			background-color: #fff;
			width: 90%;
			margin: 30rpx auto;
		}
	
	
	.image-container {
	    position: relative; /* 使子元素可以绝对定位 */
	}
	
	.information-img {
	    width: 100%; /* 确保图片宽度为100% */
	    height: auto; /* 高度自适应 */
	}
	
	.icon-container {
	    position: absolute; /* 绝对定位 */
	    bottom: 0rpx; /* 距离底部的距离 */
	    right: 10rpx; /* 距离右侧的距离 */
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    /* background: rgba(255, 255, 255, 0.7); 可选：添加背景以增强可见性 */
	    border-radius: 50%; /* 可选：圆形背景 */
	    padding: 10rpx; 
	}
	
	
		.order {
			width: 97%;
			height: 300rpx;
			line-height: 100rpx;
		}
	
		.bott {
			width: 97%;
		}
	
		.name {
			font-size: 36rpx;
			font-weight: bold;
		}
	

	/* #ifdef H5 */
	.information {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 38rpx;
		border-radius: 36rpx;
		background-color: #fff;
		width: 90%;
		margin: 30rpx auto;
	}


.image-container {
    position: relative; /* 使子元素可以绝对定位 */
}

.information-img {
    width: 100%; /* 确保图片宽度为100% */
    height: auto; /* 高度自适应 */
}

.icon-container {
    position: absolute; /* 绝对定位 */
    bottom: 0rpx; /* 距离底部的距离 */
    right: 10rpx; /* 距离右侧的距离 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: rgba(255, 255, 255, 0.7); 可选：添加背景以增强可见性 */
    border-radius: 50%; /* 可选：圆形背景 */
    padding: 10rpx; 
}


	.order {
		width: 97%;
		height: 300rpx;
		line-height: 100rpx;
	}

	.bott {
		width: 97%;
	}

	.name {
		font-size: 36rpx;
		font-weight: bold;
	}

	/* #endif */
	.information-img {
		width: 125rpx;
		height: 125rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.text-content {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		align-items: start;
		margin-left: 20rpx;
	}

	.name {
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 10rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #262626;
		margin-top: 20rpx;
		width: 240rpx;
		white-space:nowrap;overflow:hidden;text-overflow:ellipsis; display:block; 
	}

	.ses-icon {
		border-radius: 50%;
		margin: 20rpx;
	}

	/* #ifdef MP-WEIXIN */
	.icon-man .u-icon__icon::after {
		background-color: #007bff;
		border-radius: 50%;
		margin: 20rpx 0;
		/* 男性背景颜色 */
	}

	.icon-woman .u-icon__icon::after {
		background-color: #e83e8c;
		border-radius: 50%;
		margin: 20rpx 0;
		/* 女性背景颜色 */
	}

	.icon-man,
	.icon-woman {
		border-radius: 50%;
		margin-left: 10rpx;
		width: 16rpx;
		height: 16rpx;
	}

	/* #endif */
	.gq {
		font-size: 28rpx;
		color: #666;
	}

	.icons {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.icon-item {
		display: flex;
		align-items: center;
		background-color: #fff1e8;
		width: 100%;
		padding: 8rpx 6rpx;
		border-radius: 17px;
		margin-top: 11px;
		margin-left: 11px;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.icon-item text {
		margin-left: 8rpx;
		color: #ea8a19;
		font-size: 26rpx;
	}

	.logout {
		margin-top: 20rpx;
		color: #ffa159;
		text-align: center;
		font-weight: 600;
		width: 100%;
		font-size: 32rpx;
	}

	.order {
		width: 90%;
		padding: 38rpx;
		border-radius: 36rpx;
		margin-top: 40rpx;
		background-color: #fff;
		height: 240rpx;
		line-height: 75rpx;
	}

	.order-name {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 28rpx;

	}

	.order-icon {
		display: flex;
		/* 使用flex布局 */
		flex-direction: row;
		/* 子项目水平排列 */
		justify-content: space-around;
		/* 平均分布子项目，也可以使用 space-between */

	}

	.order-state-item {
		display: flex;
		flex-direction: column;
		/* 项目内部的图标和文本垂直排列 */
		align-items: center;
		/* 项目内部的图标和文本居中对齐 */
		margin: 0 10rpx;
		/* 添加左右边距 */
	}

	.bott {
		width: 90%;
		padding: 38rpx;
		border-radius: 36rpx;
		margin-top: 40rpx;
		background-color: #fff;
		line-height: 72rpx;
		padding-bottom: 20rpx;
	}

	.bott-bor {
		display: flex;
		/* 使用flex布局 */
		justify-content: space-between;
		/* 两端对齐，使得图标和文字分布在两端 */
		align-items: center;
		/* 垂直居中对齐 */
		margin-bottom: 20rpx;
		/* 添加底部间距 */
		font-size: 33rpx;
	}

	.bott-bor .u-icon {
		/* 修改图标样式，使其不占过多空间 */
		margin-right: 10rpx;
		/* 添加右侧间距 */
	}

	.bott-bor text {
		/* 修改文本样式，使其居中显示 */
		flex-grow: 1;
		/* 文本占据剩余空间 */
		text-align: left;
		/* 文本左对齐 */
	}

	.bott-b {
		width: 100%;
		margin: auto;
		text-align: center;
		padding: 18rpx 0rpx;
	}

	.icon-man {
		background-color: #007bff;
		/* 男性背景颜色 */
	}

	.icon-woman {
		background-color: #e83e8c;
		/* 女性背景颜色 */
	}
	 
</style>